
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="shortcut icon" href="images/icon.png" rel="shortcut icon" href="images/icon.png" />
	<title>Atlas</title>
	
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	
	
	<link rel="stylesheet" href="dist/leaflet.css" />
	<link rel="stylesheet" href="css/leaflet.css" />
	<script src="dist/leaflet.js"></script> 
	<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
	<script src="layer/Google.js"></script>
	

	<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
	<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
	<script src="calendar_ru.js" type="text/javascript"></script>
	<script src="azimut_ico.js" type="text/javascript"></script>
	<script src="unpars_gmt_time.js" type="text/javascript"></script>
	<script src="activ.js" type="text/javascript"></script>
	<script src="parseTime.js" type="text/javascript"></script>
	<script src="ico_track.js" type="text/javascript"></script>

	<script src="send.js" type="text/javascript"></script>  <!-- отправка емайла -->
	<script src="vhide.js" type="text/javascript"></script> 
	<script src="registerdevise.js" type="text/javascript"></script> 
<!--
<script src="https://raw.github.com/gist/2197042/2b90c41b39b7d5b3a851d8f256de2ebd3fe1fb74/leaflet-google.js"></script>
 	-->
<script src="js/yandex.js" type="text/javascript"></script> 


	<script src="js/leaflet.polylineDecorator.js"></script>
	

	<script src="layer/Yandex.js"></script>
	
	<script src="clock.js"></script>  <!-- часы текущее время -->

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }

</style>
	
	
</head>



<body onload="activSite()">
<!-- <div style="color: red;">
<p>Проводятся технические работы. </p>
<p>Временно на карте будут отмечены тестовые ДТП</p>
 </div> -->
<div style="width: 100%; height: 100%;">
	<div id="header" style="width:100%;  height: 30px; background-image:url(images/fon_main.png); border-color: #01a7ad; border-style: double; background-size: contain; ">
	    
		
		
		<div  style="width: 170px;  height: 20px; float: left; position:relative; z-index: 2;" >
			<table   style="width: 100%; height: 20px" valign="center" cellpadding="0" cellspacing="0">
				<tr>
					
					<td id= "target"  class="knopka" style="width:80px" align="center"  valign="center" rowspan="2">Target</td> 
					<td style="font-size: 9px;" class="info"  height="5px"  id="clock" style="color: #000; "></td> 
					<td  class="knopka" id="setting" onclick="vhide(this)" style="width:25px" align="center"  valign="center" rowspan="2"><img width="20px" height="20px" src="images/setting.png" style="margin-top:3px" title="setting"></td> 
					 
				</tr>
				<tr>
					<td style="font-size: 9px;"  class="info" id="clock2" style="color: #000;"  >no link</td> 
				</tr>
			</table>
			
			
			<!-- <p  align="center" style="margin: 5px auto; ">Target <span id="clock" style="color: #000;"></span></p> -->
		</div>
		
		<div  id='information' class="knopka"  style="width: 102px; height: 25px; 
		margin-left: -160px; margin-right:2spx; 
		position:relative; float:right; 
		z-index: 2" >
		
			<p   align = "center" style="margin: 5px auto;">Information</p>
		</div>
		
		<div  id='geosearch_v'  class="knopka"   style="width: 33px;height: 25px; 
		margin-left: -160px; margin-right:102px; 
		position:relative; float:right; z-index: 2" >
				<p   align = "center"  ><img width="18px" height="21px" src="images/lupa.png"  ></p>
		</div>
		
		<div  id='but_mh' class="knopka" onclick="vhide(this);"  style="width: 33px;	height: 25px; 
		margin-left: -160px; margin-right:135px; 
		position:relative; float:right; 
		z-index: 2" >
				<p   align = "center" style="margin-top:3px"  ><img width="20px" height="20px" src="images/oblasti.png"  ></p>
		</div>
		
		
	</div>
	<div id="map" style="width: 100%; height: 100%; margin: auto; z-index: 1" >
	</div>
</div>
	<div align="center" style=" position: absolute; top: 3px; left: 50%; width: 40px; height: 17px; margin-left: -12px; ">
		<img src="images/logo.png" style="margin-top: 5px; z-index: 1"  >
	</div>
	
	
	
		<div id="div_avto" style="top: 36px; width: 170px; position: absolute;  background-image: url(images/bg.png);
		 z-index: 2;  
		 border: 2px ridge #01a7ad;
		 visibility: hidden;
		 text-shadow: none">


				 
					<div id="scrollbar1" style="z-index: 2; margin: 5px auto;">
						<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
						<div class="viewport">
							 <div class="overview">
								<table id="table_us" align="center" style="margin-left: 2px; margin-top: 5px" cellspacing="2">
									
									<!--  смотри скрипт "вывод зарегестрированных устройств"-->
								</table>
							 
							
							 
							 </div>
						</div>
					</div>


				<div class="pointer"  style="width: 170px;    position:absolute; bottom: 0px;"  >
					
					<table style="width: 170px; font-size: 10px;" align = " center" cellpadding="0" cellspacing="0"> 
						<tr align = " center">
							<td class="knopka" align = "center" id= "sledit" style="width: 50%;   height: 25px;"> Auto center</td>
							<td class="knopka" align = "center" id="vector" style="width: 50%;   height: 25px; ">Track line</td>
						</tr>
						<tr>
							<td class="knopka" id= "k_report" colspan="2" align="center"  style="width: 100%; font-size: 12px;   height: 25px; "> Report</td>
						</tr>
					
					</table>
					
					
					
					
				</div>

			</div>
	
	
	
		<div id="div_information" style="top: 36px; width: 170px;  position: absolute;  right: 0px; background-image: url(images/bg.png);
		 z-index: 2;  
		 border: 2px ridge #01a7ad;
		 visibility: hidden;
		 text-shadow: none">
			<table style="width: 160px; " align = " center" cellpadding="0" cellspacing="0">
				
						
						
						<tr>
							<td id ="infoText" class="pointer" colspan="2" align="left"  valign ="top" style="width: 100%;  "></td>
						</tr>
						
						
						
						
						
			</table>
			
			<div id="action_event"   style="width: 170px;     position:absolute; bottom:0px;"  >
				<table style="width: 170px;" align = " center" cellpadding="0" cellspacing="0" style="margin:0px">
					
					<tr>
							<td class="knopka" id="confirm_event"  align="center"   style="width: 50%;  height: 25px;">Confirm<span id="span_event"></span></td>
							<td class="knopka" id="send_email" onclick = "vhide(this)" align="center"   style="width: 100%;  height: 25px;">send em@il<span id="span_event"></span></td>
					</tr>
				
							<tr align = " center" >
								<td class="pointer" id = "accident" onclick = "clickType(this)" align = "center" style="width: 50%;   height: 25px; border-top: 2px ridge #01a7ad;  "> <img src="images/dtp.png" style="margin-bottom:-2px" ><p id="accidentText">Accident</p></td>
								<td class="pointer" id = "malfunction"  onclick = "clickType(this)" align = "center"  style="width: 50%;  height: 25px; border-top: 2px ridge #01a7ad; "> <img src="images/ins.png" style="margin-bottom:-2px" ><p id="malfunctionText">Malfunction</p></td>
							</tr>
						
					
					<tr>
							<td class="knopka" id="markMap"  align="center" colspan="2"   style="width: 100%;  height: 25px; ">Mark on the map</td>
					</tr>
						
					<tr>
							<td class="knopka" id="removeDtp"  align="center"     style="width: 50%;  height: 25px;">Remove</td>
							<td class="knopka" id="resetParam"  align="center"    style="  height: 25px;">Reset</td>
					</tr>
					</table>
			</div>
		 
		 </div>
	
				
			<div id="div_report" style="
			top: 50px;
			left: 50%;
			width: 180px; 
			position: absolute; 
			background-image: url(images/bg.png);
			z-index: 2;  
			border: 2px ridge #01a7ad;
			box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
			margin-left: -90px;
			visibility: hidden;
			text-shadow: none;"> 
					<p align="center" style="   height: 25px; background-image: url(images/fon_nadpis.png); margin: auto; ">Device/user: <span id="report_user">undefined</span></p>
					<p align="center">From date</p>
					
				<form action="" align="center" style="z-index: 3" >
								
					<p style="margin-top:0px; z-index: 3"  ><input id="forma_from" style="z-index: 3" type="text" value="dd-mm-yy" name="mydata" onfocus="this.select();lcs(this)" onclick="event.cancelBubble=true;this.select();lcs(this)" >	</p>
				
				</form>
					<p align="center">To date</p>
					
				<form action="" align="center" style="z-index: 3" >
								
					<p style="margin-top:0px; z-index: 3"  ><input id="forma_to" style="z-index: 3" type="text" value="dd-mm-yy" name="mydata" onfocus="this.select();lcs(this)" onclick="event.cancelBubble=true;this.select();lcs(this)" >	</p>
				
				</form>
				
				<div class="pointer"  >
					<table align = "center" cellpadding="0" cellspacing="0" style="margin-top: 10px" >
						<tr> 
							<td id="show_track"   class="knopka" align = "center"  style="width: 178px;   height: 25px;">Show track</td>
						</tr>
						<tr> 
							<td id="skryt" class="knopka" align = "center"  style="width: 159px;   height: 25px; ">Hide track</td>
						</tr>
						
						<tr> 
							<td  align = "center"  style="width: 159px;   height: 25px; border-bottom: solid 1px #01a7ad; ">Points: <span id="points"> ...</span> </td>
						</tr>
						
						<tr> 
							<td  align = "center"  style="width: 159px;   height: 25px; border-bottom: solid 1px #01a7ad; ">Distance km: <span id="dist_t"> ...</span> </td>
						</tr>
						<tr> 
							<td  align = "center"  style="width: 159px;   height: 25px;   ">Vmax km/h: <span id="vmax"> ...</span>  </td>
						</tr>
						
						<tr> 
							<td  align = "center"  style="width: 159px;   height: 25px;   ">  <img src="images/lineyka.png"   ></p></td>
						</tr>
						
						<tr> 
							<td  align = "center"  id="cancel_report"   class="knopka" style="width: 159px;   height: 25px;">Close</td>
						</tr>
					
					
					</table>
					
				</div>
				
				
				
				
			</div>
			
			
			
		<div id="div_setting" style="
			top: 40px;
			left: 50%;
			width: 300px; 
			position: absolute; 
			background-image: url(images/bg.png);
			z-index: 2;  
			border: 2px ridge #01a7ad;
			box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
			margin-left: -150px;
			visibility: hidden;
			text-shadow: none;"> 
			<p align="center">Setting</p>
			<table style="margin:5px">
				<tr>
					<td>GMT</td><td><input id="gmt" type="text" size="2" > </td> 
				</tr>
			</table>
			<table id="register_divise" style="font-size: 10px; width: 100%">
				
			</table>
			
			<table class="font" style=" margin: 5px">
		<tr> 
			<td id= "add_divise" align="center" class="knopka" style="width: 158px; margin: 5px auto; height: 25px; ">
			Save changes
			</td>
			
			<td id= "rem_devise" align="center" class="knopka" style="width: 158px; margin: 1px auto; height: 25px: ">
			remove devise (N)<span id="i_rem_dev"></span>
			</td>
		</tr>
		</table>
			
			
		</div>			
			
			
		<div id="div_confirm_dtp" style="
			top: 10px;
			left: 50%;
			width: 180px; 
			position: absolute; 
			background-image: url(images/bg.png);
			 z-index: 4;  
			border: 2px ridge #01a7ad;
			box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
			margin-left: -90px;
			 visibility: hidden;
			 text-shadow: none;"> 
			 
			 <p align="center" style="   height: 25px; background-image: url(images/fon_nadpis.png); margin: auto; "> Comment</p>
				<table align="center" cellpadding="0" cellspacing="0">
				<tr>
					<td colspan="2"  align="center" style=" height: 25px; margin:-2px; " >
						<form>
							<textarea id="commentText" rows="4" style="width: 177px; margin-left:-1px;  margin-bottom: -3px; background: url(images/bg.png);"></textarea>
						</form>
					</td>
				</tr>
				<tr>
					<td align="center" id ="confirm" class="knopka" style="width: 178px;   height: 25px;" >Confirm</td>
					<td align="center" id="cancel_dtp"  class="knopka" style="width: 178px;   height: 25px;">Cancel</td>
				</td>	
				</table>
			 </div>
			 
			 	
			<div id="div_confirm_cancel_dtp" style="
			bottom: 25px;
			right: 25px;
			width: 180px; 
			position: absolute; 
			background-image: url(images/bg.png);
			 z-index: 2;  
			 border: 2px ridge #01a7ad;
			box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
			margin-left: -90px;
			  visibility: hidden;
			 text-shadow: none;"> 
			 
			 
				<table align="center" cellpadding="0" cellspacing="0" style="width: 180px;">
				
				<tr>
					<td align="center" colspan="2" valign="center" style="   background-image: url(images/fon_nadpis.png);"><img src="images/rem_dtp.png"  ><span id="selectRemove"></span>
					</td>
				</tr>
				
				<tr>
									
					<td align="center" id ="confirm_remove" class="knopka" style="   height: 25px;" >Confirm</td>
					<td align="center" id="cancel_remove"  class="knopka" style="   height: 25px;">Cancel</td>
				</tr>
				</table>
			 </div>
			 
			 
				 
	 
	<div id="div_geosearch" style="
			top: 42px;
			left: 50%;
			width: 300px; 
			position: absolute; 
			background-image: url(images/fon_nadpis.png);
			z-index: 1;  
			border: 2px ridge #01a7ad;
			box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
			margin-left: -150px;
			opacity: 0.8;
			color: #0084c2;
			visibility: hidden;"> 		 
			 
<label ><p align="center">GEO Search </p></label><input id="address" style="width:296px;" type="text"/> 
			 
			 
		
	</div>
	
	<!-- окошко рассылки емайлов -->
	<div id="div_send" style="
			bottom: 100px;
			right: 160px;
			width: 180px; 
			position: absolute; 
			background-image: url(images/bg.png);
			 z-index: 4;  
			border: 2px ridge #01a7ad;
			box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
			visibility: hidden;
			 
			text-shadow: none;"> 
			 
			 <p align="center" style="   height: 25px; background-image: url(images/fon_nadpis.png); margin: auto; "> Comment</p>
				<table align="center" cellpadding="0" cellspacing="0">
				<tr>
					<td colspan="2"  align="center" style=" height: 25px; margin:-2px; " >
						<form>
							<textarea id="commentTextEmail" class="font" rows="4" style="width: 177px; margin-left:-1px;  margin-bottom: -3px; background: url(images/bg.png);"></textarea>
						</form>
					</td>
				</tr>
				<tr>
					<td align="center" id ="confirm_send" class="knopka" onclick="vhide(this);" style="width: 178px;   height: 25px;" >Send @</td>
					<td align="center" id="cancel_send"  class="knopka" onclick="vhide(this)" style="width: 178px;   height: 25px;">Cancel</td>
				</td>	
				</table>
			 </div>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		<div id="div_oblasti" style="
			top: 35px;
			right: 170px;
			width: 150px; 
			position: absolute; 
			background-image: url(images/bg.png);
			z-index: 1;  
			border: 2px ridge #01a7ad;
			box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
			margin-left: 0px;
			opacity: 0.8;
			color: #0084c2;
			visibility: hidden;"> 	
			<!-- скрипт показа областей -->
		</div>
		
		<div id="mh" style="
			top: 35px;
			right: 170px;
			width: 150px; 
			position: absolute; 
			
			z-index: 1;  
			
			box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
			margin-left: 0px;
			
			visibility: hidden;
			"> 	
			
			<div class="knopka" id="oblasti">
						<p  align="center" style="margin: 3px; "  >Wiki Области</p>
			</div>
			<div class="knopka">
				<p  align="center" style="margin: 3px; "  >Статистика ДТП</p>
			</div>
		</div>
	




</body>

<script type="text/javascript">
		$(document).ready(function(){
			$('#scrollbar1').tinyscrollbar();	
		});
</script>


<script type="text/javascript"> // расчет пааматров экрана

var width=document.body.clientWidth; // ширина  
var height=document.body.clientHeight; // высота  
var height_div_avto;
var h;
//alert(width);

var w=(width-6)*100/width;

h=100*35/height;
//h=h+"px";
h=100-h;
h=h+"%";
//alert(h);
 var h_txt;
 h_txt=100-(100*120)/height;
 h_txt= h_txt+"%";

height_div_avto =((height-40)/height)*100;
height_div_avto=height_div_avto+"%";
//alert(height_div_avto);
document.getElementById("header").style.width =  w+"%";
document.getElementById("map").style.height =  h;
document.getElementById("div_avto").style.height =  height_div_avto;
 document.getElementById("div_information").style.height =  height_div_avto;
///document.getElementById("scrollbar1").style ="50px"
	
</script>


<script type="text/javascript"> //вывод зарегистрированных устройств
var countUzers = <?php echo  $countUzers; ?>; //получаем количество зарегестрированных юзеров. 
var arrUzers = <?php echo  $arrUzers; ?>; //получаем массив самих юзеров 
var uzer = [];
var uzerClick=(-1); // при клике на юзера этой переменной присваивается номер юзера (начиная с нуля)
var indexSledt=0;

var tempPoint=[];


for ( var i=0; i<countUzers; i++){             // разбиваем юзеров на двумерный массив. uzer [порядковый номер юзера 0..1.. и тд][0-имей юзера, 1 имя юзера] 
      uzer [i] =     arrUzers[i].split("#");
}


var us1 = '<tr><td width="70px" class="pointer" id = "usva" style="font-weight: bold; font-size: 12px">Name</td>	<td  style="font-weight: bold; font-size: 11px">GPRS</td>	<td  style="font-weight: bold; font-size: 10px">Speed</td></tr>';

var us2="";

  //  строчки с юзерами. id первый получает uzer0, второй uzer1.. итд
for ( var i=0; i<countUzers; i++){         
us2+='<tr> <td class="pointer" id="uzer'+i+ '" style=" font-size: 11px; ">'+ uzer [i][1]+'<p style=" font-size: 9px; ">'+uzer [i][2]+'</p>'+
' </td> 	<td id="uzerGPRS'+i+'" style="font-weight: bold; font-size: 10px">...</td> <td id="uzerSpeed'+i+'" style="font-weight: bold; font-size: 10px">...</td>	</tr>';
}
document.getElementById('table_us').innerHTML = us1+us2; 

document.getElementById('register_divise').innerHTML=set.show();

</script>








<script>//инициализация карты
/*
		var map;
		map	= L.map('map').setView([50.439, 30.497], 12);
*/
/*
		var map = L.map('map', {
								center: [50.439, 30.497],
								zoom: 11,
								closePopupOnClick: false
								});
		
		
		L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
		}).addTo(map);

*/

//var map = new L.Map('map', {center: new L.LatLng(50.442, 30.558), zoom: 11, zoomAnimation: false, closePopupOnClick: false });

/*
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
//var osm = new L.TileLayer('maps/{z}/{x}/{y}.png'); если подгружать со своего компа
var yndx = new L.Yandex();
var ytraffic = new L.Yandex("null", {traffic:true, opacity:0.8, overlay:true});

map.addLayer(osm); // карта по умолчанию
map.addControl(new L.Control.Layers({'OSM':osm, "Yandex":yndx},    {"Пробки":ytraffic}));
//map.addLayer(ytraffic);
*/

var map = new L.Map('map', {center: new L.LatLng(50.442, 30.558), zoom: 11, zoomAnimation: false, closePopupOnClick: false } );
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var yndx = new L.Yandex();
//var ytraffic = new L.Yandex("null", {traffic:true, opacity:0.8, overlay:true});
var ggl = new L.Google();
var ytraffic = new L.Yandex("null", {traffic:true, opacity:0.8, overlay:true});
map.addLayer(osm);
map.addControl(new L.Control.Layers( {'OSM':osm, 'Google':ggl, "Yandex":yndx,   }, {"Пробки":ytraffic} ));



/*
 new L.Control.GeoSearch({
            provider: new L.GeoSearch.Provider.Google()
        }).addTo(map); 
*/  
		
		/*
		var myIcon=[];
		var is;
		for(var i=0; i<24; i++){
			is=i;
			if(i<10){
			is="0"+i;
			}
			
			myIcon[i] = L.icon({
				iconUrl: 'images/strelka/0000'+is+'.png',
				iconRetinaUrl: 'my-icon@2x.png',
				iconSize: [20, 20],
				iconAnchor: [10, 10],
				
			});
		}
*/		
		var myIcon; //иконка текущего положения
		myIcon = L.icon({ 
				iconUrl: 'images/strelka/0001.png',
				//iconRetinaUrl: 'mimages/strelka/00001.png',
				iconSize: [20, 20],
				iconAnchor: [10, 10],
				
			});
			
		var icon_move=[];
		
		for(var i=0;i<25; i++){
		icon_move[i]=L.icon({ 
				iconUrl: 'images/strelka/000'+i+'.png',
				//iconRetinaUrl: 'mimages/strelka/00001.png',
				iconSize: [20, 20],
				iconAnchor: [10, 10],
				
			});
		
		}
		
		var icon_no_signal=L.icon({ 
				iconUrl: 'images/mrk_no_signal.png', // маркер отсутсвия сигнала
				//iconRetinaUrl: 'mimages/mrk_no_signal.png',
				iconSize: [14, 14],
				iconAnchor: [7, 7],
				
			});
			
		var icon_no_speed=L.icon({ 
				iconUrl: 'images/mrk_no_speed.png', // маркер отсутсвия сигнала
				//iconRetinaUrl: 'mimages/mrk_no_signal.png',
				iconSize: [14, 14],
				iconAnchor: [7, 7],
				
			});
			
		
		var point = new L.Point(0, -3); //офсет для попап
		
		var myIcon_tr; //иконка текущего положения
		myIcon_tr = L.icon({ 
				iconUrl: 'images/speed/1.png',
				//iconRetinaUrl: 'my-icon@2x.png',
				iconSize: [8, 8],
				iconAnchor: [4, 4],
				
			});
		
		var icon_speed=[];
		
		for (var i=1; i<=7; i++){
			icon_speed[i] = L.icon({ 
				iconUrl: 'images/speed/'+i+'.png',
				//iconRetinaUrl: 'my-icon@2x.png',
				iconSize: [8, 8],
				iconAnchor: [4, 4],
				
			});
			
		}
			
		icon_speed[0] = L.icon({ 
				iconUrl: 'images/speed/0.png',
				//iconRetinaUrl: 'my-icon@2x.png',
				iconSize: [10, 10],
				iconAnchor: [5, 5],
				
			});
		/*
		var marker=[];
		marker[0]=L.marker([50.439, 30.497], {icon: myIcon[2]}).bindPopup("I am a marker.");
		marker[0].addTo(map).openPopup();
*/

		//map.removeLayer(marker[0]);
		
			/*
		L.circle([50.439, 30.477], 500, {
			color: 'red',
			fillColor: '#f03',
			fillOpacity: 0.5
		}).addTo(map).bindPopup("I am a circle.");
*/
		L.polygon([
			[51.509, -0.08],
			[51.503, -0.06],
			[51.51, -0.047]
		]).addTo(map).bindPopup("I am a polygon.");


		var popup = L.popup();
		
		
		
/*
		function onMapClick(e) {
			popup
				.setLatLng(e.latlng)
				.setContent("You clicked the map at " + e.latlng.toString())
				.openOn(map);
		}

		map.on('click', onMapClick);
*/

//map.on('click', onMapClick);

function onMapClick(e){
//alert (e.latlng);
//map.panTo(L.latLng(50.439, 30.397)); //центрирование карты
marker=L.marker(e.latlng, {icon: myIcon}).bindPopup("I am a marker.").addTo(map);
}

</script>

<script src="js/Marker.Rotate.js" type="text/javascript"></script>  <!-- плагин вращения маркера -->
<script> // пересчет времени отображения от гринвича
//var gmt=2; // счещение времени от гринвича

var activClock=0;


if(activClock==1){
//document.getElementById("header").style.width =  width+"px";
//clock();
clock.show();
//pusk();
clock.start_site();
zaprosDtp();
}

function activSite(){
activClock=1;
//clock();
clock.show();
//pusk();
clock.start_site();
zaprosDtp();
}





var gmt=<?php echo  $gmt; ?>;

document.getElementById("gmt").value=gmt; 

var yy; //год
var mm; // месяц	
var dd; //день 
var hh; //часы
var mi; //минуты
var ss; // секунды



function dataTime(yy, mm, dd, hh, mi, ss){


yyd="20"+yy;
mmd=mm;
ddd=parseFloat(dd);
hhd=parseFloat(hh)+gmt;
mid=mi;
ssd=ss;


if (23<hhd){
hhd=hhd-24;
ddd=ddd+1;

}


return ddd+"/"+mmd+"/"+yyd+" "+hhd+":"+mid+":"+ssd;
}

</script>


<script type="text/javascript">//первая загрузка
var login="<?php echo  $login; ?>";
var lastPos = <?php echo  $lastPos; ?>;  //получаем массив с последними посылками
var i;
//alert (lastPos[1]); //проверяем
var arrLastPos=[];
arrLastPos[0]=lastPos[0].split(",");

var change_signal=[];

for( var i=0; i< countUzers; i++){
change_signal[i]=0;
arrLastPos[i]=lastPos[i].split(",");  //   arrLastPos[номер юзера начиная с 0][ 1 .. 2 координата , 3 время]      
}


var signal=[];
function proverka_aktiv(){

//alert(arrLastPos[0][3]);
	for(var i=0; i<countUzers; i++){
	var time_posilki=unpars_gmt_time(arrLastPos[i][3]);
	var posTime = activ(time_posilki); //получение секунд посылки с начала года
	//alert(posTime);
	var tekTime=activ(parseTime()); //получение текущих секунд с начала года
	var raznica=tekTime-posTime;
	//alert(posTime +":"+tekTime);
	try{
			if (600<raznica){
			//alert(raznica); 				// надо закрасить серым
			
			document.getElementById("uzerGPRS"+i).style.color="#959595"; 
			document.getElementById("uzerSpeed"+i).style.color="#959595"; 
			//	change_signal[i]
			signal[i]=0;
			//change_signal[i]=1;
			//redrawPoint(i);    // +перериросать маркер
			
			}else{
				document.getElementById("uzerGPRS"+i).style.color="#0030ba"; 	
				document.getElementById("uzerSpeed"+i).style.color="#0030ba"; 				
				signal[i]=1;			// есть сигнал юзер активный
			}
		}catch(err){};
	}
	
}

proverka_aktiv(); //и запускае мфункцию проверки активности (есть ли сигнал)









var marker =[]; 
var popap=[];
var last_marker_array_position =[]; //массив с последними координатами
var popup;

last_position_uzers();
//var latlng = new L.LatLng(50.5, 30.5);


function last_position_uzers(){   //функция отображения последних позиций маркеров

for( var i=0; i< countUzers; i++){                        //отображаем последние координаты юзеров
	var lat=(parseFloat(arrLastPos[i][1]));
	var lng=(parseFloat(arrLastPos[i][2]));
	//alert (lng);
	var arrVremya=[];
	arrVremya=arrLastPos[i][3].split("");
	yy=arrVremya[0]+arrVremya[1];
	mm=arrVremya[2]+arrVremya[3];
	dd=arrVremya[4]+arrVremya[5];
	hh=arrVremya[6]+arrVremya[7];
	mi=arrVremya[8]+arrVremya[9];
	ss=arrVremya[10]+arrVremya[11];
	
	var vremyaIzm = dataTime(yy, mm, dd, hh, mi, ss); // запускаем функцию им\изменения времени. Прибавляем GMT
	var speed="Speed: "+arrLastPos[i][4]+"km/h";
		
	var azimut= azimut_ico(arrLastPos[i][7]);
	var icon_m=icon_move[azimut];
	
	//var azimut_n_ico=azimut_ico(azimut);
	//alert(azimut);
	
	if(arrLastPos[i][4]==0){
	icon_m=icon_no_speed;
	//alert("no speed");
	}
	
	if(signal[i]==0){
	icon_m=icon_no_signal;
	}
	
	var satellite="Satellite: "+ arrLastPos[i][5];
	var charge= "Charge v: "+arrLastPos[i][6]+"";
	
	
	last_marker_array_position[i]=new L.LatLng(lat, lng); //при первом старте
	
	marker[i]=L.marker([lat, lng], {icon: icon_m}).bindPopup(uzer [i][1]+"<br>"+vremyaIzm+"<br>"+speed+"<br>"+satellite+ "<br>"+charge);
	marker[i].addTo(map);
	
	
	
	popup[i] = L.popup({autoPan: false, offset: point}).setLatLng(L.latLng(lat, lng)).setContent(uzer [i][1]+'<p style="margin: 0px; font-size: 9px;">'+uzer [i][2]+'</p>').addTo(map);
	document.getElementById('uzerGPRS'+i).innerHTML = vremyaIzm; 
	document.getElementById('uzerSpeed'+i).innerHTML = arrLastPos[i][4]+"km/h"; 
	
	//marker[i].on('mouseover', onMarkerClick )
	


	//map.on('click', onMapClick);
	
	}
	
	//marker[0].addTo(map).openPopup();
//map.panTo(L.latLng(50.439, 30.497));



	
}
	

//финиш первая загрузка
</script>




<script> // обновление координат
var dlit=5000;  //каждые 5 секунд
var intervalID;
//intervalID = setTimeout(pusk, dlit); //пауза в 5 сек

//setTimeout(pusk, dlit); 

function pusk(){
try{
 kz = $.ajax({  
				
			    type:'POST',
			    url:'z.php',
			    data: 'countUzers='+countUzers+'&login='+login,
				async: false,
			   	success: function (data){ 
				//alert(data); 
				//proverka_popoln();
				
				},

	}).responseText; 			//получаем переменную kz содержащюю строку с последними данными. Каждый юзер разделен "!"

	
	
	
}catch(err){}
	//alert(kz); 
//proverka_aktiv();
try{
proverka_popoln(); //запускаем проверку - появилась ли новая точка
}catch(err){}
setTimeout(pusk, dlit); //после получения посылки опять запускаем проверку через 5 сек

}


//proverka_aktiv();





var ok=[];
var arrOk=[];
//var pi;
var iv;
function proverka_popoln(){
clock.show_request();

ok= kz.split("!");  //разделем посылку на юзеров  ok[0] - данные нулевого юзера. данные - одной строкой
//alert (ok[1]);
//alert ("5cek");

	for(var i=0; i< countUzers; i++){
			arrOk[i]=ok[i].split(","); //разделяем 
			arrLastPos[i]=arrOk[i];
	}
	proverka_aktiv();
	for(var i=0; i< countUzers; i++){  // для каждого юзера сравниваем последнюю послыку с полученной из аякса (самой последней) :)
			
	
		
		
		//alert (change_signal[i]+"  "+signal[i]);
		if(ok[i]==lastPos[i] && signal[i]==0){
		//alert ("нет новых посылок"); // нет
		}
		if(ok[i]==lastPos[i] && signal[i]==1){
		//нет change_signal[i] 
		}
		if(ok[i]!=lastPos[i] || change_signal[i]!=signal[i]){ //перерисовываем
			change_signal[i]=signal[i];
		   // получаем arrLastPos двумерный массив arrLastPos[номер юзера][0id, 1 lat, 2 lng...]
		//	pi=i; //переменнвая для передачи истинного значения i 
			//marker[i].setMap(null); //                                                          
			
			//map.removeLayer(popup[i]);
			redrawPoint(i);  // отрисовываем перерисовываем точку которая изменилась
			lastPos[i]=ok[i]; // внимание ... проверить!	
			
		
		
		}
		
		
	}

}




</script>





<script> //отрисовка новой точки (если появилась более новая точка после проверки данных в БД)
function redrawPoint(i){
//var i=pi;
//change_signal[i]=0;
map.removeLayer(marker[i]); //  очищаем преведущий один маркер !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
map.removeLayer(popup[i]); // очищаем попап
arrLastPos[i]=ok[i].split(",");
var lat=(parseFloat(arrLastPos[i][1]));
var lng=(parseFloat(arrLastPos[i][2]));
var arrVremya=[];
arrVremya=arrLastPos[i][3].split("");

    yy=arrVremya[0]+arrVremya[1];
	mm=arrVremya[2]+arrVremya[3];
	dd=arrVremya[4]+arrVremya[5];
	hh=arrVremya[6]+arrVremya[7];
	mi=arrVremya[8]+arrVremya[9];
	ss=arrVremya[10]+arrVremya[11];
	
var vremyaIzm = dataTime(yy, mm, dd, hh, mi, ss); // запускаем функцию им\изменения времени. Прибавляем GMT
var speed="Speed: "+arrLastPos[i][4]+"km/h";
var satellite="Satellite: "+ arrLastPos[i][5];
var charge= "Charge v: "+arrLastPos[i][6]+"";

	last_marker_array_position[i]=new L.LatLng(lat, lng); // меняем последнюю координату точким 
	
	var azimut= azimut_ico(arrLastPos[i][7]);
	icon_m=icon_move[azimut];
	
	if(arrLastPos[i][4]==0){
	icon_m=icon_no_speed;
	//alert("no speed");
	}
	
	if(signal[i]==0){
	icon_m=icon_no_signal;
	}
	
	marker[i]=L.marker([lat, lng], {icon: icon_m}).bindPopup(uzer [i][1]+"<br>"+vremyaIzm+"<br>"+speed+"<br>"+satellite+ "<br>"+charge);
	marker[i].addTo(map);
	
	popup[i] = L.popup({autoPan: false, offset: point}).setLatLng(L.latLng(lat, lng)).setContent(uzer [i][1]+'<p style="margin: 0px; font-size: 9px;">'+uzer [i][2]+'</p>').addTo(map);
	
	document.getElementById('uzerGPRS'+i).innerHTML = vremyaIzm; 
	document.getElementById('uzerSpeed'+i).innerHTML = arrLastPos[i][4]+"km/h";
	
	if(uzerClick!=(-1) && indexSledt==1 && uzerClick==i ){                 // если нажата кнопочка "следить" - центрируем карту на том устройстве за которым следим
	map.panTo(L.latLng(lat, lng)); 
	}
	
	
	if(indexVector==1){  //если нажат вектор - работаем с полилинией
				v[i]++;
				mPolylineCoords[i][v[i]]=last_marker_array_position[i]; //заполняем polylineCoords [ номер юзера][увеличиваем длинну вектора]
				iv=i;
				//alert(mPolylineCoords[i][v[i]]);
				polylineDraw(i); //запускаем функцию отрисовки	
				}
	
	
	
}
</script>




<script type="text/javascript">// события по клику для каждого юзера
<?php echo  $funClick; ?>; //получаем функции клик0 клик 1.. и тд
//click;
<?php echo  $obrabotka; ?>;


//функция запускается при нажатии на одном из устройств. Функция принимает uzerClick - номер юзера на который произведено нажатие (см PHP).
function activUzer(){
	for( i=0; i< countUzers; i++){
	document.getElementById("uzer"+i).style.color="#000";  //всем юзерам назнаяаем серый цвет
	}
document.getElementById("uzer"+uzerClick).style.color="red"; //теперь только активному
//alert (uzer [uzerClick][1]);
document.getElementById("report_user").innerHTML = uzer [uzerClick][1]; 

}


document.getElementById("usva").onclick=usva;
function usva(){
	//map.setCenter(myLatlng);
	map.setZoom(11);
	uzerClick=(-1);
	document.getElementById("sledit").style.color="#000";
	indexSledt=0;
	document.getElementById("report_user").innerHTML = "undefined"; 
	for( i=0; i< countUzers; i++){
	document.getElementById("uzer"+i).style.color="#000";  //всем юзерам назнаяаем черный цвет
	}

}

</script>



<script>// кнопка отоборазить
document.getElementById("show_track").onclick=otobr_trek;


function otobr_trek(){

var track;
var fromPeriod = document.getElementById("forma_from").value;
var toPeriod = document.getElementById("forma_to").value;
var arrPeriod=[];
//alert (fromPeriod+toPeriod);

if(fromPeriod=="dd-mm-yy" || toPeriod=="dd-mm-yy"  || uzerClick==(-1) ){
	alert("Device or data undefined");
	}else{
	skryt();
	arrPeriod=[];
	arrPeriod=fromPeriod.split("-");
	fromPeriod=arrPeriod[2].substring(2)+arrPeriod[1]+arrPeriod[0];
	arrPeriod=[];
	arrPeriod=toPeriod.split("-");
	toPeriod=arrPeriod[2].substring(2)+arrPeriod[1]+arrPeriod[0];
	//alert (fromPeriod+toPeriod);
	
	
		track = $.ajax({  
					
					type:'POST',
					url:'track.php',
					data: 'fromPeriod='+fromPeriod+'&toPeriod=' +toPeriod+ '&uzerClick='+uzerClick+'&login='+login, //посылаем интересующий нас день и номер юзера
					async: false,
					success: function (data){ 
					//alert(data); 
					//proverka_popoln();
					
					},

		}).responseText;
		if (track=="0"){
		alert ("нет данных");
		}else {
		pointTrack(track, uzerClick);
		maxSpeed(fromPeriod, toPeriod, uzerClick, login);
		}
	
	
	}
}

function maxSpeed(fromPeriod, toPeriod, uzerClick, login){
	
	//alert(fromPeriod);
	speed = $.ajax({  
					
					type:'POST',
					url:'maxspeed.php',
					data: 'fromPeriod='+fromPeriod+'&toPeriod=' +toPeriod+ '&uzerClick='+uzerClick+'&login='+login, //посылаем интересующий нас день и номер юзера
					async: false,
					success: function (data){ 
					//alert(data); 
					//proverka_popoln();
					
					},

		}).responseText;
//////////////////
document.getElementById("vmax").innerHTML = speed; 
}







var arrTrack=[];
var arrTrackFull=[];
var marker_tr_array_position=[];
var marker_tr=[];
var polyline;
var markerPatterns;
function pointTrack(tr, nomerUzera){
	//alert(tr+nomerUzera);
	//var polylineCoords_tr=[];
	
	arrTrack=tr.split("!");
	
	marker_tr=[];
	marker_tr_array_position=[];
	//alert("количество точек:"+arrTrack.length); // количество точек.
	
	document.getElementById('points').innerHTML = arrTrack.length ;
	for(var i=0; i<arrTrack.length-1; i++){
	arrTrackFull[i]=arrTrack[i].split(",");
	
	var lat=(parseFloat(arrTrackFull[i][1]));
	var lng=(parseFloat(arrTrackFull[i][2]));
	
	
	
	arrVremya=arrTrackFull[i][3].split("");
	
	yy=arrVremya[0]+arrVremya[1];
	mm=arrVremya[2]+arrVremya[3];
	dd=arrVremya[4]+arrVremya[5];
	hh=arrVremya[6]+arrVremya[7];
	mi=arrVremya[8]+arrVremya[9];
	ss=arrVremya[10]+arrVremya[11];
	
	var vremyaIzm = dataTime(yy, mm, dd, hh, mi, ss); // запускаем функцию им\изменения времени. Прибавляем GMT
	var speed="Speed: "+arrTrackFull[i][4]+"km/h";
	var satellite="Satellite: "+ arrTrackFull[i][5];
	var charge= "Charge v: "+arrTrackFull[i][6]+"";
	//alert(lat+"  "+lng);
	
	
	//ico_track(arrTrackFull[i][4]);
	//var 
	var ico = icon_speed[ico_track(arrTrackFull[i][4])];
	
	marker_tr[i]= new L.Marker([lat, lng], {icon: ico}).bindPopup(uzer[nomerUzera][1]+"<br>"+vremyaIzm+"<br>"+speed+"<br>"+satellite+ "<br>"+charge);
	marker_tr[i].addTo(map);
	marker_tr_array_position[i]	= new L.LatLng(lat, lng);
		
		if (i==arrTrack.length-2){
		map.panTo(L.latLng(lat, lng))
		}
	}
	 polyline = L.polyline(marker_tr_array_position, {color: '#0024ff', weight: '2', opacity: "0.9"}).addTo(map);
	 markerPatterns = L.polylineDecorator(polyline, {
        patterns: [
            { offset: '5%', repeat: '100px', symbol: new L.Symbol.ArrowHead({pixelSize: 10,  polygon: false, pathOptions: {stroke: true, weight: 2, color: '#0024ff', opacity: "0.9"}})}
        ]
    }).addTo(map);
	 
	 
	latlng2distance(arrTrackFull); // //запускаем функцию расчета дистанции
}


</script>



<script>//нажатие на кнопку вектор. отображение следа за устройством(ми)

var indexVector=0;
document.getElementById("vector").onclick=vector;
function vector(){
	if(indexVector==0){
		indexVector=1;
		polyLineInit();
		v[i]=0; 
		document.getElementById("vector").style.color="#fff"; 
		document.getElementById("vector").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
		
	}else{
		indexVector=0;
		document.getElementById("vector").style.color="#000"; 
		document.getElementById("vector").style.textShadow="none";
		
		for (var i=0; i<countUzers; i++){
			
			try{
			map.removeLayer(markerPatternsMPoly[i]);
			} catch(err){};
			try{
			map.removeLayer(mPoly[i]);
			} catch(err){};
			
			
			
			
			v[i]=0; 
		}
	}

}



var v=[];
for(var i=0; i<countUzers; i++){
v[i]=0;
}

var mPoly=[];
var mPolylineCoords=[];



polyLineInit();

function polyLineInit(){

	for(var i=0; i<countUzers; i++){
	mPolylineCoords[i]=[];
	}
	for(var i=0; i<countUzers; i++){
	mPolylineCoords[i][0]=last_marker_array_position[i]; //массив координат каждого юзера mPolylineCoords[i] массив юзера i
	//alert(last_marker_array_position[i]);
	}
}
//var mpolycoord;
var markerPatternsMPoly=[];
function polylineDraw(i){

	var ii=i;
		//alert(i, mPolylineCoords[ii]);
	try{ 
	map.removeLayer(mPoly[ii]);
	map.removeLayer(markerPatternsMPoly[ii]);
		
	} catch(err){};
	mPoly[ii]= new L.polyline(mPolylineCoords[ii], {color: '#ff0078', weight: '2', opacity: "1"}).addTo(map);
	
	try{ 
	//markerPatternsMPoly=[];
	markerPatternsMPoly[ii] = new L.polylineDecorator(mPoly[ii], {
			patterns: [
				{ offset: '0%', repeat: '100px', symbol: new L.Symbol.ArrowHead({pixelSize: 10,  polygon: false, pathOptions: {stroke: true, weight: 2, color: '#ff0078', opacity: "0.9"}})}
			]
		}).addTo(map);
	}catch(err){};



	
}




</script>


<script>
/*
azimut(50.3, 30.2, 50.4, 30.4);

polyline = L.polyline( [
			[50.3, 30.2],
			[50.4, 30.4],
			
		], {color: '#008fd2', weight: '2', opacity: "0.9"}).addTo(map);
function azimut(lat1, lng1, lat2, lng2){
B = Math.PI*(lng2 - lng1)/180;
c = Math.PI*(90 - lat1)/180;
a = Math.PI*(90 - lat2)/180;

temp=(Math.cos(a)*Math.cos(c))+(Math.sin(a)*Math.sin(c)*Math.cos(B));
azimutr=Math.acos(temp);
azimutg=azimutr*180/3.14;
alert (azimutr+"  "+azimutg);
}
*/



</script>



<script>// вычисление расстояний 
var lat1;
var long1;
var lat2;
var long2;

var dist_sum =0;



function latlng2distance(arrTrackFull) {
   

    var R = 6372795;  //радиус Земли
	
	for (var i=0; i<(arrTrackFull.length-1); i++){


		lat1 = arrTrackFull[i][1] ; long1= arrTrackFull[i][2];
		lat2 = arrTrackFull[i+1][1]; long2= arrTrackFull[i+1][2];

		
		 
		//перевод коордитат в радианы
		lat1 *= Math.PI / 180;
		lat2 *= Math.PI / 180;
		long1 *= Math.PI / 180;
		long2 *= Math.PI / 180;
			
		//вычисление косинусов и синусов широт и разницы долгот
		var cl1 = Math.cos(lat1);
		var cl2 = Math.cos(lat2);
		var sl1 = Math.sin(lat1);
		var sl2 = Math.sin(lat2);
		var delta = long2 - long1;
		var cdelta = Math.cos(delta);
		var sdelta = Math.sin(delta);
	   
		//вычисления длины большого круга
		var y = Math.sqrt(Math.pow(cl2 * sdelta, 2) + Math.pow(cl1 * sl2 - sl1 * cl2 * cdelta, 2));
		var x = sl1 * sl2 + cl1 * cl2 * cdelta;
		var ad = Math.atan2(y, x);
		var dist = ad * R; //расстояние между двумя координатами в метрах
		dist_sum=dist_sum+dist;
	 }
	 dist_sum=dist_sum/1000;
     dist_sum=parseFloat(dist_sum.toFixed(2));
	
	 document.getElementById('dist_t').innerHTML = " "+dist_sum; //вставляем на страницу
	     
	 
	 
}
</script>	






<script>//выпадающее меню Target
document.getElementById("target").onclick=target;
function target(){
	if(document.getElementById("div_avto").style.visibility=="visible"){
	document.getElementById("target").style.color="#000";
	document.getElementById("target").style.textShadow="none";
	document.getElementById("div_avto").style.visibility="hidden";
	}else{
	document.getElementById("div_avto").style.visibility="visible";
	document.getElementById("target").style.color="#fff";
	document.getElementById("target").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
	}
}


</script>

   
<script>//выпадающее меню Report
document.getElementById("k_report").onclick=report;
document.getElementById("cancel_report").onclick=report;
function report(){
	if(document.getElementById("div_report").style.visibility=="visible"){
	document.getElementById("k_report").style.color="#000";
	document.getElementById("k_report").style.textShadow="none";
	document.getElementById("div_report").style.visibility="hidden";
	}else{
	document.getElementById("div_report").style.visibility="visible";
	document.getElementById("k_report").style.color="#fff";
	document.getElementById("k_report").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
	}
}


</script>



<script>//кнопка скрыть


document.getElementById("skryt").onclick=skryt;
function skryt(){
if(0<arrTrack.length){

	for(var i=0; i<arrTrack.length-1; i++){
		map.removeLayer(marker_tr[i]);
	}
	map.removeLayer(polyline);
	map.removeLayer(markerPatterns);
	//polyline ////////////////////////////////////
	}
}

</script>


<script> //подсветка кнопки следить


document.getElementById("sledit").onclick=sledit;
function sledit(){
	if (uzerClick==(-1)){
		alert("Устройство не выбрано");
	}
	else{
		if(indexSledt==0){
		indexSledt=1;
		document.getElementById("sledit").style.color="#fff";  //если устройство выбрано - светим 
		document.getElementById("sledit").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
		
		
		}
		else{
		indexSledt=0;
		document.getElementById("sledit").style.color="#000";
		document.getElementById("sledit").style.textShadow="none";
		}
	}

}
</script>




																<!-- СОБЫТИЯ! -->


<script>//////////////////////////////////////////////////////////////////////////////////////// СОБЫТИЯ!
var event=<?php echo  $event; ?>; //подписка на события
var event_change=<?php echo  $event_change; ?>;//возможность добавлять события
var event_confirm=<?php echo  $event_confirm; ?>;// возможность редактировать - добавлять удалять подтверждать

if (event_confirm==0){
document.getElementById("confirm_event").style.display="none";
document.getElementById("send_email").style.display="none";
}

if (event_change==0){
document.getElementById("action_event").style.display="none";
}


document.getElementById("information").onclick=information;

function information(){
if(document.getElementById("div_information").style.visibility=="visible"){
	document.getElementById("div_information").style.visibility="hidden";
	document.getElementById("information").style.color="#000";
	document.getElementById("information").style.textShadow="none";
	
	}else{
	document.getElementById("div_information").style.visibility="visible";
	document.getElementById("information").style.color="#fff";
	document.getElementById("information").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
	}

}


</script>

<script>
	var dtpIcon; //иконка ДТП
		dtpIcon = L.icon({ 
				iconUrl: 'images/mrk_dtp.png',
				iconRetinaUrl: 'my-icon@2x.png',
				iconSize: [20, 20],
				iconAnchor: [10, 10],
				
	});
	
	var malIcon; //иконка ДТП
		malIcon = L.icon({ 
				iconUrl: 'images/mrk_malfunction.png',
				iconRetinaUrl: 'my-icon@2x.png',
				iconSize: [20, 20],
				iconAnchor: [10, 10],
				
	});

	
	
var dlit=5000;  //каждые 5 секунд
var intervalID;
//z = setTimeout(zaprosDtp, 1000); // через секунду посылаем запрос

var activdtp="0";

function zaprosDtp(){
	try{
	dtp = $.ajax({  
					
					type:'POST',
					url:'dtp.php',
					data: 'login='+login+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm, 
					async: false,
					success: function (data){ 
					//alert(data); 
					//proverka_popoln();
					
					},

		}).responseText;
	}catch(err){}
	
	try{
		proverkaDtp(dtp); //получаем посылку и запускаем проверку есть ли новая посылка
	}catch(err){}
		z = setTimeout(zaprosDtp, dlit); 
	
		
		
}	

var markerD=[];
var dtpParam=[];
function proverkaDtp(dtp){
	
	if (activdtp == dtp){
	//alert ("ничего нового"); //ничего не делаем
	}else{
		removeOllDtp();
		var fulllarrdtp=[];
		activdtp=dtp;
		var arrStrokaDtp=dtp.split("&#33");
		var a="";

			for(var i=0; i<arrStrokaDtp.length; i++){
			fulllarrdtp[i]=arrStrokaDtp[i].split("&#32");
			}
		dtpParam=fulllarrdtp; //полный массив текущих дтп
		addnewDtp(fulllarrdtp);   //добавляем дтп на карту
		}
}
var countDtp=0;
var idDisplay=[];
var color_event=[]; //цвет покарски текста в текстовом окне
function addnewDtp(f){
	countDtp=0;
	idDisplay=[];
	var infoText="";
	for(var i=0; i<f.length-1; i++){
		var lat = f[i][1];
		var lng = f[i][2];
		var date = unparseTime(f[i][3]);
		var typeEvent=f[i][4];
		if(typeEvent=="accident"){
		typeEvent="ДТП";
		}else{
		typeEvent="Поломка"
		}
		
		
		
		if (f[i][7]==0){
		color_event[i]="gray";
		}
		if(f[i][7]==1){
		color_event[i]="blue";
		}
		
		infoText=infoText+'<p id='+"d"+f[i][0]+' '+'onclick="start(this)"'+'style="color:'+color_event[i]+'">' +f[i][0]+". "+f[i][8]+" "+typeEvent+"<br>"+date+"<br>" +f[i][5]+"</p>"; // f[i][3] -время
		if (f[i][4]=="accident"){
		var ico=dtpIcon;
		}else{
		var ico=malIcon;
		}
		
		markerD[i]=L.marker([lat, lng], {icon: ico}).bindPopup(f[i][0]+". "+date+"<br>" +f[i][5]);
		markerD[i].addTo(map);
		
		idDisplay[i]= "d"+f[i][0]; // актуальные id
		countDtp++;   //уеличиваем счетчик текущих дтп 
		}

addInfoText(infoText);

}
function addInfoText(t){
document.getElementById("infoText").innerHTML = t;
}



function removeOllDtp(){
	for(var i=0; i<countDtp; i++){
	//alert[f[i][0]];
	map.removeLayer(markerD[i]); 
	}
}



var selectIdDtp;
function start(obj)	{ // по клику на дтп 
var id=obj.id; // id дтп равно
var n;
var countId= id.replace( 'd', '' );
document.getElementById("selectRemove").innerHTML = " "+countId; //в ремове пишем номер дтп
document.getElementById("span_event").innerHTML = " "+countId;
selectIdDtp=countId;

var text=document.getElementById(id).innerHTML;
//alert (text);

	for(var i=0; i<countDtp; i++){
	
		document.getElementById(idDisplay[i]).style.color=color_event[i]; //всем  назначаем тот цвет, который был в посылке серый цвет
		if(dtpParam[i][0]==countId){
		n=i; // n номер в массиве этого дтп
		}
	}
document.getElementById(id).style.color="red";  //теперь только активному
map.panTo(L.latLng(dtpParam[n][1], dtpParam[n][2])); //центрируем на выбранном дтп
document.getElementById("commentTextEmail").value="";
text=text.replace("<br>", " ");
text=text.replace("<br>", "\r\n ");
document.getElementById("commentTextEmail").value = text;

}



	
document.getElementById("removeDtp").onclick=removeDtp; 
 
var indexRemoveDtp=0;
function removeDtp(){
	if(indexRemoveDtp==1){
	document.getElementById("removeDtp").style.color="#000";
	document.getElementById("removeDtp").style.textShadow="none";
	indexRemoveDtp=0;
	//removeMark();
	document.getElementById("div_confirm_cancel_dtp").style.visibility="hidden";
	}else{
	
	document.getElementById("removeDtp").style.color="#fff";
	document.getElementById("removeDtp").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
	indexRemoveDtp=1;
	document.getElementById("div_confirm_cancel_dtp").style.visibility="visible";
	}
}

document.getElementById("cancel_remove").onclick=removeDtp; 


function confirm_event_to_db(){

conf_event=$.ajax({  
					
					type:'POST',
					url:'confirm_event.php',
					data: 'login='+login+'&id='+selectIdDtp, //логин и id дтп 
					async: false,
					success: function (data){ 
					//alert(data); 
					//proverka_popoln();
					
					},

		}).responseText;


}



document.getElementById("confirm_event").onclick=confirm_event_to_db;






document.getElementById("confirm_remove").onclick=RemDtpDb; //запуск исменений в БД

	function RemDtpDb(){
	removeDtp();

	
	
	Rem = $.ajax({  
					
					type:'POST',
					url:'remDtp.php',
					data: 'login='+login+'&id='+selectIdDtp+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm, //логин и id дтп 
					async: false,
					success: function (data){ 
					//alert(data); 
					//proverka_popoln();
					
					},

		}).responseText;
	
	//alert(Rem);
	
	
	}
	

	

	
	


var indexMarkMap=0;
document.getElementById("markMap").onclick=markMap;  
document.getElementById("cancel_dtp").onclick=markMap; 
function markMap(){  // изменение подсветки
	if(indexMarkMap==1){
	document.getElementById("markMap").style.color="#000";
	document.getElementById("markMap").style.textShadow="none";

	document.getElementById("div_confirm_dtp").style.visibility="hidden";
	
	
	
	
	
		try{
		map.removeLayer(tempMarker); 
		} catch(err){}
		indexMarkMap=0;
	}else{
	
	document.getElementById("markMap").style.color="#fff";
	document.getElementById("markMap").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
	indexMarkMap=1;
	clickTempMark=0;
	document.getElementById("div_confirm_dtp").style.visibility="visible";
	}
}

map.on('click', onMapClick); // следит за кликом на карте
var clickTempMark=0;
var setDtpLatLng;
function onMapClick(e){
	
	if (indexMarkMap==1 && clickTempMark==0){  //если нажата кнопочка адд маркер, выполняем  //////////////////////////////////////////////////////////////////////////////////////////////////////
	
	if (type=="accident"){
		var ico=dtpIcon;
		}else{
		var ico=malIcon;
		}
	
	tempMarker=L.marker(e.latlng, {icon: ico}).addTo(map); //ставим временный маркер
	clickTempMark=1;
	setDtpLatLng=e.latlng;
	}
}

document.getElementById("confirm").onclick=checkCon;  // при подтверждении запускаем проверку сделанных действий
function checkCon(){
	//alert ("проверяем");
	if(clickTempMark==1){
		//alert("стартуем запись");
		clickTempMark=0;
		startIntoBD();
	}

}

var type="accident"; // тип события по умолчанию
function startIntoBD(){ //

	var temp=setDtpLatLng.toString();

	temp=temp.replace( 'LatLng(', '' );
	temp=temp.replace(')','');
	var tempArr=[];
	tempArr=temp.split(',');
	var lat=tempArr[0];
	var lng=tempArr[1];
	var datatime=time();
	var comment=getText();


	markMap();
	recordDtp = $.ajax({  
						
						type:'POST',
						url:'recordDtp.php',
						data: 'lat='+lat+'&lng=' +lng+ '&datatime='+datatime+'&type='+type+'&comment='+comment+'&login='+login+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm, //посылаем маркер в дб
						async: false,
						success: function (data){ 
						
						},

			}).responseText;





}


function getText(){
var text="";
text=document.getElementById("commentText").value; //берем текст
document.getElementById("commentText").value=""; // и очищаем
return text;
}

function clickType(obj){
type=obj.id;
//alert(type+"Text");

document.getElementById("accidentText").style.color="#000";
document.getElementById("accidentText").style.textShadow="none";
document.getElementById("accident").style.background ="none";
document.getElementById("malfunctionText").style.color="#000";
document.getElementById("malfunctionText").style.textShadow="none";
document.getElementById("malfunction").style.background ="none";



document.getElementById(type+"Text").style.color="#fff";
document.getElementById(type+"Text").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
document.getElementById(type).style.background ="#6fd5ff";


}

document.getElementById("resetParam").onclick=resetParam;
function resetParam(){

document.getElementById("accidentText").style.color="#000";
document.getElementById("accidentText").style.textShadow="none";
document.getElementById("accident").style.background ="none";
document.getElementById("malfunctionText").style.color="#000";
document.getElementById("malfunctionText").style.textShadow="none";
document.getElementById("malfunction").style.background ="none";
type="accident";

for(var i=0; i<countDtp; i++){
	
		document.getElementById(idDisplay[i]).style.color=color_event[i]; //всем  назначаем тот цвет, который был в посылке серый цвет
		
	}

}

/*
document.getElementById("accident").onclick=clickType; 
function clickType(){
type = "accident"
}
*/




		
			
</script>

<script >




function time(){ // текущее врмя + парсинг даты
var m=new Date();
var yy = m.getFullYear()-2000;
var mm = m.getMonth()+1; if (mm<10){mm="0"+mm;}
var dd = m.getDate() ;  if (dd<10){dd="0"+dd;}
var hh = m.getHours(); if (hh<10){hh="0"+hh;}
var mi = m.getMinutes(); if (mi<10){mi="0"+mi;}
var ss = m.getSeconds(); if (ss<10){ss="0"+ss;}
var d=yy+mm+dd+hh+mi+ss ;

return d;
}

function unparseTime(t){ //разпарсинг даты
var arr=[];
arr=t.split("");
var realTime;
realTime=arr[4]+arr[5]+"/"+arr[2]+arr[3]+"/"+arr[0]+arr[1]+" "+arr[6]+arr[7]+":"+arr[8]+arr[9]+":"+arr[10]+arr[11];

return realTime;
};






</script> 


<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 

<style>
	.ui-autocomplete {
	background-color: white;
	width: 300px;
	border: 1px solid #cfcfcf;
	list-style-type: none;
	padding-left: 0px;
}
	</style>
<script>





var geocoder;
geocoder = new google.maps.Geocoder();

$(document).ready(function() { 
         
  //initialize();
				  
  $(function() {
    $("#address").autocomplete({
      //Определяем значение для адреса при геокодировании
      source: function(request, response) {
        geocoder.geocode( {'address': request.term}, function(results, status) {
          response($.map(results, function(item) {
		  
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //Выполняется при выборе конкретного адреса
      select: function(event, ui) {
        $("#latitude").val(ui.item.latitude);
        $("#longitude").val(ui.item.longitude);
		//alert(ui.item.latitude);
		map.panTo(L.latLng(ui.item.latitude, ui.item.longitude));
		map.setZoom(14);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
		
       // marker.setPosition(location);
       // map.setCenter(location);
      }
    });
  });
	
  //Добавляем слушателя события обратного геокодирования для маркера при его перемещении  
  google.maps.event.addListener(marker, 'drag', function() {
    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          $('#address').val(results[0].formatted_address);
          $('#latitude').val(marker.getPosition().lat());
          $('#longitude').val(marker.getPosition().lng());
        }
      }
    });
  });
  
});

document.getElementById("geosearch_v").onclick=geosearch;

function geosearch(){
if(document.getElementById("div_geosearch").style.visibility=="visible"){
	document.getElementById("div_geosearch").style.visibility="hidden";
	
	}else{
	document.getElementById("div_geosearch").style.visibility="visible";
	
	}

}




</script>

<script>
//нажатие на области
document.getElementById("oblasti").onclick=oblasti;

function oblasti(){
vhide(this);
if(document.getElementById("div_oblasti").style.visibility=="visible"){
	document.getElementById("div_oblasti").style.visibility="hidden";
	}else{
	document.getElementById("div_oblasti").style.visibility="visible";
	_oblasti();
	}

}



function _oblasti(){
document.getElementById("div_oblasti").style.visibility="visible";
var text_oblasti = $.ajax({  
						
						type:'POST',
						url:'oblasti.php',
						data: 'login='+login, //
						async: false,
						success: function (data){ 
						
						},

			}).responseText;
			//alert(text_oblasti);
document.getElementById("div_oblasti").innerHTML = text_oblasti;
}





</script>

<script>


</script>

</html>
